import {onMounted, ref} from "vue";
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {getCategories} from "@/apis/category.js";

export function useCategory() {
  const categoryData = ref({});
  const route = useRoute();

  const getData = async (id = route.params.id) => {
    try {
      const res = await getCategories(id);//当用户访问路径 /category/123 时，route.params.id 将是 '123'。
      categoryData.value = res.result;
      console.log("数据获取成功:", categoryData.value);
    } catch (error) {
      console.error("数据获取失败:", error);
    }
  };

  onMounted(() => {
    getData();
  });
//三个都是监听路由变化的方法，效果一样。
// 监听路由变化, 重新获取数据:
// watch(() => route.params.id, getData);//https://chatgpt.com/c/6756a8fc-5648-8005-b04d-e6b0b99f9f0d
// watchEffect(() => {getData()}) //watchEffect 会自动追踪其回调函数内部使用的响应式数据
  onBeforeRouteUpdate((to, from,) => {
    console.log("路由发生变化，重新获取数据");
    console.log(to, from)// to 和 from 是路由对象，包含了新旧路由信息。
    getData(to.params.id);
  })//与watch相似，但是onBeforeRouteUpdate在路由发生变化时触发，而watch在数据变化时触发。
// 监听路由变化, 重新获取数据
  return {
    categoryData
  };
}
